<!--
 * @Author: 刘佳欢 2173558681@qq.com
 * @Date: 2022-11-16 20:18:38
 * @LastEditors: 刘佳欢 2173558681@qq.com
 * @LastEditTime: 2025-09-28 19:40:31
 * @FilePath: \团队项目\am-ui\src\views\dashboard\components\Map.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="map-container" ref="map" style="margin-top: 40px;height: 400px;width: 100%;"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { get } from '@/utils/request'

export default {
  data() {
    return {
      // 存放所有设备信息
    }
  },
  mounted() {
    this.loadMap()
  },
  methods: {
    loadMap() {
      AMapLoader.load({
        key: "e24dd6b9fa1dcd8bdcc0f03edc5f8a3d",
        version: "2.0",
        plugins: [], // 插件加在这里
      })
        .then((AMap) => {
          const map = new AMap.Map(this.$refs.map, {
            pitch: 50,
            rotateEnable: true,
            pitchEnable: true,
            zoom: 17,
            rotation: -15,
            zooms: [2, 20],
            center: [121.48, 31.24],
            terrain: true
          });

          const traffic = new AMap.TileLayer.Traffic({
            autoRefresh: true,
            interval: 180,

          });
          map.add(traffic); //通过add方法添加图层
          //异步加载控件
          AMap.plugin(['AMap.ToolBar', 'AMap.HawkEye'], function () {
            var toolbar = new AMap.ToolBar({
              position: 'LB'
            }); //缩放工具条实例化
            map.addControl(toolbar); //添加控件
            // toolbar.show(); //缩放工具展示
            var hawkEye = new AMap.HawkEye();
            map.addControl(hawkEye);
          });
          traffic.setMap(map); // 把交通图层添加到地图
        })
        .catch((e) => {
          console.error("地图加载失败", e);
        });
    }
  }
};
</script>

<style lang="less" scoped></style>
